<template>
    <div>
      <div class="table_card">
        <!-- 上部分 title -->
        <div class="table_card_top">
          <span class="solid_left"></span>
          <div class="table_card_title">约客提成</div>
          <div class="op_right">
            <button class="primary_button" @click="handleAdd">添加提成</button>
          </div>
        </div>
  
        <div class="table_list">
          <el-table :data="AppointmentData" stripe style="width: 100%">
            <el-table-column
              prop="confMoneyUp"
              label="约客项目金额上限"
              width="250px"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.confMoneyUp }}</span>
                <span>{{ MoneyUpType[scope.row.confMoneyUpType] }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="confMoneyDown"
              label="约客项目金额下限"
              width="250px"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.confMoneyDown }}</span>
                <span>{{ MoneyDownType[scope.row.confMoneyDownType] }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="confRuleMoney" label="手工提成比例"></el-table-column>
            <el-table-column label="操作" width="200px">
              <template slot-scope="scope">
                <el-button size="mini" type="text" @click="edit(scope.row)"
                  >编辑</el-button
                >
                <el-button size="mini" type="text" @click="dele(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <pagination
            :total="total"
            :page.sync="queryParams.pageNo"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
        </div>
  
        <!-- 新增规则 -->
        <el-dialog
          :visible.sync="AppointmentdialogVisible"
          width="500px"
          :title="title"
          class="no-dialog-padding"
          :before-close="handleClose"
        >
          <span>
            <div class="AddRules_box">
              <el-form
                ref="AppointmentForm"
                :rules="AddRules"
                :model="AppointmentForm"
                label-position="top"
              >
                <el-row>
                  <el-form-item label="区间下限" prop="confMoneyDownType">
                    <div class="Rules_form_box">
                      <div class="Rules_form_select">
                        <el-select
                          v-model="AppointmentForm.confMoneyDownType"
                          placeholder="请选择"
                          class="w-120"
                        >
                          <el-option
                            v-for="item in MoneyDownTypeOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          >
                          </el-option>
                        </el-select>
                      </div>
                      <div class="Rules_form_ipt">
                        <el-input-number
                          placeholder="请输入金额"
                          v-model="AppointmentForm.confMoneyDown"
                          class="down_ipt text-left"
                          :precision="2"
                          :min="0"
                          :max="1000000"
                          :controls="false"
                        ></el-input-number>
                      </div>
                    </div>
                  </el-form-item>
                </el-row>
                <el-row>
                  <el-form-item label="区间上限" prop="confMoneyUp">
                    <div class="Rules_form_box">
                      <div class="Rules_form_ipt">
                        <el-input-number
                          placeholder="请输入金额"
                          v-model="AppointmentForm.confMoneyUp"
                          class="up_ipt text-left"
                          :precision="2"
                          :min="0"
                          :max="1000000"
                          :controls="false"
                        ></el-input-number>
                      </div>
                      <div class="Rules_form_select">
                        <el-select
                          v-model="AppointmentForm.confMoneyUpType"
                          placeholder="请选择"
                          class="w-120"
                        >
                          <el-option
                            v-for="item in MoneyUpTypeOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          >
                          </el-option>
                        </el-select>
                      </div>
                    </div>
                  </el-form-item>
                </el-row>
                <el-row>
                  <el-col>
                    <el-form-item label="提成设置" prop="confRule">
                      <el-radio-group v-model="AppointmentForm.confRule">
                        <div class="sex_box">
                          <div class="radio_box">
                            <el-radio label="R">按实收比例提成</el-radio>
                            <el-radio label="P">按原价比例提成</el-radio>
                            <!-- <el-radio label="F">固定金额提成</el-radio> -->
                          </div>
                        </div>
                      </el-radio-group>
                      <div class="ipt_iner">
                        <el-input-number
                          v-model="AppointmentForm.confRuleMoney"
                          placeholder="请输入提成比例"
                          class="w-100 text-left"
                          :precision="2"
                          :min="0"
                          :max="1000000"
                          :controls="false"
                        ></el-input-number>
                      </div>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </span>
          <span slot="footer" class="dialog-footer">
            <el-button class="cancel_btn" @click="handleClose">取 消</el-button>
            <el-button type="primary" @click="AddRulesSubmit">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
  </template>
          
<script>
  import {
    getStoresPage,
    CreateStoresSet,
    UpdateStoresSet,
    DeleteStores,
    getStoresInfo,
  } from "@/api/business/parameter";
  export default {
    name: "Storeadmincovenant",
  
    data() {
      return {
        AppointmentdialogVisible: false,
        loading: false,
        title: "",
        value: "",
        queryParams: {
          pageNo: 1,
          pageSize: 10,
          confType: "IV", // 配置类型
        },
        AppointmentData: [], // 约客提成列表数据
        AppointmentForm: {
          confMoneyDownType: "",
          confMoneyDown: "",
          confMoneyUpType: "",
          confMoneyUp: "",
          confRule: "",
          confRuleMoney: "",
          confType: "IV", // 配置类型
          confId: "",
        },
  
        AddRules: {
          confMoneyDownType: [
            { required: true, message: "请选择", trigger: "blur" },
          ],
          confMoneyUp: [
            { required: true, message: "请输入金额", trigger: "blur" },
          ],
          confRule: [{ required: true, message: "请选择", trigger: "blur" }],
        },
        total: 0,
        // 上限类型
        MoneyUpType: {
          LE: "<",
          EL: "≤",
        },
  
        // 下限类型
        MoneyDownType: {
          UP: ">",
          EU: "≥",
        },
  
        MoneyUpTypeOptions: [
          {
            value: "LE",
            label: "<",
          },
          {
            value: "EL",
            label: "≤",
          },
        ],
  
        MoneyDownTypeOptions: [
          {
            value: "UP",
            label: ">",
          },
          {
            value: "EU",
            label: "≥",
          },
        ],
      };
    },
  
    created() {
      this.getList();
    },
  
    mounted() {},
  
    methods: {
      // 获取详情
      getStoresInfos(row) {
        let confId = row.confId;
        getStoresInfo({ confId: confId })
          .then((res) => {
            const { code, data } = res;
            if (code === 0) {
              let {
                confId,
                confMoneyDown,
                confMoneyDownType,
                confMoneyUp,
                confMoneyUpType,
                confRule,
                confRuleMoney,
              } = data;
  
              this.AppointmentForm = {
                confId: confId,
                confMoneyDown: confMoneyDown,
                confMoneyDownType: confMoneyDownType,
                confMoneyUp: confMoneyUp,
                confMoneyUpType: confMoneyUpType,
                confRule: confRule,
                confRuleMoney: confRuleMoney,
                confType: "IV", // 配置类型
              };
            }
          })
          .catch((err) => {});
      },
  
      // 确定
      AddRulesSubmit() {
        this.$refs["AppointmentForm"].validate((valid) => {
          console.log(this.AppointmentForm);
          if (valid) {
            if (!this.AppointmentForm.confId) {
              this.NewRecharge();
            } else {
              this.EditRecharge();
            }
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
  
      // 新建
      NewRecharge() {
        CreateStoresSet(this.AppointmentForm)
          .then((res) => {
            const { code } = res;
            if (code === 0) {
              this.getList();
              this.$message({
                type: "success",
                message: "操作成功!",
              });
              this.handleClose();
            }
          })
          .catch((err) => {});
      },
  
      // 编辑
      EditRecharge() {
        const {
          confId,
          confMoneyDown,
          confMoneyDownType,
          confMoneyUp,
          confMoneyUpType,
          confRule,
          confRuleMoney,
        } = this.AppointmentForm;
        UpdateStoresSet({
          confId: confId,
          confMoneyDown: confMoneyDown,
          confMoneyDownType: confMoneyDownType,
          confMoneyUp: confMoneyUp,
          confMoneyUpType: confMoneyUpType,
          confRule: confRule,
          confRuleMoney: confRuleMoney,
          confType: "IV", // 配置类型
        })
          .then((res) => {
            const { code } = res;
            if (code === 0) {
              this.getList();
              this.$message({
                type: "success",
                message: "操作成功!",
              });
              this.handleClose();
            }
          })
          .catch((err) => {});
      },
  
      resQ() {
        this.queryParams.pageNo = 1;
        this.total = 0;
        this.HospitalityData = [];
        this.getList();
      },
  
      // 约客提成
      getList() {
        this.loading = true;
        getStoresPage(this.queryParams)
          .then((res) => {
            // console.log(res);
            this.loading = false;
            const { code, data } = res;
            if (code === 0) {
              this.AppointmentData = data.list;
              this.total = data.total;
            }
          })
          .catch((err) => {
            this.loading = false;
          });
      },
  
      handleClose() {
        this.resetFormData("AppointmentForm");
        this.AppointmentForm.confMoneyDown = "";
        this.AppointmentForm.confRuleMoney = "";
        this.AppointmentForm.confId = "";
        this.$nextTick(() => {
          this.AppointmentdialogVisible = false;
        });
      },
  
      // 表单重置
      resetFormData(formName) {
        // console.log(this.$refs[formName]);
        this.$refs[formName].resetFields();
      },
  
      // 筛选
      handleQuery() {
        this.queryParams.pageNo = 1;
        this.getList();
      },
  
      /** 重置按钮操作 */
      resetQuery() {
        this.resetFormData("queryForm");
        this.handleQuery();
      },
  
      // 表单重置
      resetFormData(formName) {
        console.log(this.$refs[formName]);
        this.$refs[formName].resetFields();
      },
  
      // 列表 删除
      dele(row) {
        this.$confirm("提成删除后无法撤销, 是否删除?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            DeleteStores({ id: row.confId }).then((res) => {
              const { code } = res;
              if (code === 0) {
                this.getList();
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
              }
            });
          })
          .catch(() => {});
      },
  
      handleAdd() {
        this.AppointmentdialogVisible = true;
        this.AppointmentForm.confMoneyUpType = "";
        this.title = "添加提成";
      },
  
      edit(row) {
        this.AppointmentdialogVisible = true;
        this.title = "修改规则";
        this.getStoresInfos(row);
      },
    },
  };
  </script>
          
  <style lang="scss" scoped>
  .w-200 {
    width: 200px;
    background: #ffffff;
    border-radius: 4px;
  }
  
  .client_name {
    font-size: 14px;
    font-weight: 400;
    color: #0052d9;
  }
  
  .give {
    height: 40px;
    font-size: 14px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.85);
    margin-top: 40px;
    line-height: 40px;
  }
  
  .el-form-item {
    margin-bottom: 20px;
  }
  
  .recharge_form {
    padding: 10px 24px;
  }
  
  .memberName {
    font-size: 14px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.85);
  }
  .el_row_item {
    margin-bottom: 10px;
  }
  .el_row_date {
    margin-top: 20px;
  }
  .el_row_reason {
    margin-top: 10px;
  }
  
  .el_row_date {
    .el-form-item {
      margin-bottom: 0px;
    }
  }
  
  .separate_left {
    width: 1px;
    height: 14px;
    // background: #e9e9e9;
    margin-right: 12px;
  }
  .separate_right {
    width: 1px;
    height: 14px;
    // background: #e9e9e9;
    margin-left: 12px;
  }
  
  .check {
    font-size: 12px;
    color: #0052d9;
  }
  
  .list_Stores {
    height: 22px;
    font-size: 14px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.9);
    line-height: 22px;
    .list_Stores_item {
      height: 46px;
      line-height: 46px;
      background: #ffffff;
      padding-left: 47px;
      border-bottom: 1px solid #e7e7e7;
    }
  }
  
  .AddRules_box {
    padding: 0 24px;
    .Rules_form_box {
      display: flex;
      .Rules_form_select {
        margin-right: 10px;
      }
    }
  }
  
  .radio_box {
    display: flex;
    margin-bottom: 10px;
  }
  
  .up_ipt {
    width: 300px;
    margin-right: 20px;
  }
  .down_ipt {
    width: 300px;
    margin-left: 10px;
  }
  
  .sex_box {
    padding: 0 10px;
  }
  </style>